<template>
    <header class="header">
      <h1>todos</h1>
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="change">
      <label for="toggle-all"></label>
      <input
        class="new-todo"
        placeholder="输入任务名称-回车确认"
        autofocus
        v-model="info"
        @keydown.enter="addfn"
      />
    </header>
  </template>
  
  <script>

  export default {
    props:['list'],
     data(){
        return {
            info:""
        }
     },
     methods:{
        addfn(){
           if(this.info.length){
            this.$emit('add',this.info) 
           this.info=''
           }
        }
     },
     computed:{
        change:{
        set(val){
          this.list.forEach(item=>item.isDone=val)
        },
        get(){
           return this.list.every(item=>item.isDone) 
        }
      }
     }
  }
  </script>